<template>
	 <div class="container">
			  <!-- 面包屑导航 -->
			  <div class="breadcrumb">
			  	<el-breadcrumb separator="">
			  	  <el-breadcrumb-item :to="{ name: 'home'}"><div class="div1">首页</div></el-breadcrumb-item>
			  			<el-breadcrumb-item	:to="{ name: 'personalinfo'}"><div class="div3">个人信息</div></el-breadcrumb-item>
			  	  <el-breadcrumb-item><div class="div2">修改密码</div></el-breadcrumb-item>
			  	</el-breadcrumb>
			  </div>
			  <!-- 面包屑导航 -->
					<div class="elfrom">
						<p class="header">修改密码</p>
       <el-form  :model="ruleForm"  ref="ruleForm" :rules="rules" label-width="80px">
										<el-form-item label="用户密码" prop="password">
												<el-input type='password' v-model="ruleForm.password" placeholder='请输入用户密码'></el-input>
										</el-form-item>
										<el-form-item label="新密码" prop="newPass">
												<el-input type='password' v-model="ruleForm.newPass" placeholder='请输入用户密码'></el-input>
										</el-form-item>
										<el-form-item label="确定密码" prop="truePass">
												<el-input type='password' v-model="ruleForm.truePass" placeholder='请输入用户密码'></el-input>
										</el-form-item>
										<el-form-item>
									 		<el-button type='primary' @click='submit("ruleForm")'>确定修改</el-button>
										</el-form-item>
					 </el-form>
					</div>
		</div>
</template>

<script>
	export default{
		data(){
			return{
				ruleForm:{
					password:"",
					newPass:"",
					truePass:""
				},
				rules: {
				  password: [
				    { required: true, message: '请输入旧密码', trigger: 'blur' },
								{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
				  ],
				  newPass: [
				    { required: true, message: '请输入您需要修改的新密码', trigger: 'blur' },
								{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
				  ],
						truePass: [
						  { required: true, message: '请输入您确定您的新密码', trigger: 'blur' },
								{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
						]
			 },
			}
		},
		methods:{
			submit(formName){
					this.$refs[formName].validate((valid) => {
							if (valid) {
							  this.axios.post('/sys/v1/user/update/password',{
							  	  "request": {
							  	    "confirmNewPassword": this.ruleForm.truePass,
							  	    "newPassword": this.ruleForm.newPass,
							  	    "oldPassword": this.ruleForm.password,
							  	    "userId": sessionStorage.getItem('user_id')
							  	  },
							  	  "version": ""
							  }).then(res=>{
							  	// console.log(res);
							  	if(res.code==0){
							  		 this.$message.success('修改成功');
												this.$router.replace({name:'home'})
							  	}else{
										 	this.$message.error(res.message);
										}
							  })	
							}else{
						  	return false;
			  		}
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	.div1{
		margin-left:-16px;
		background: url(../../assets/breadcrumb2.png);
		width:120px;
		height:30px;
		text-align: center;
		line-height: 30px;
		color:#2D7EDF;
	}
	
	.div2{
		margin-left:-16px;
		background: url(../../assets/breadcrumb1.png);
		width:120px;
		height:30px;
		text-align: center;
		line-height: 30px;
		color:#fff;
	}
	.div3{
		margin-left:-8px;
		background: url(../../assets/breadcrumb3.png);
		width:120px;
		height:30px;
		text-align: center;
		line-height: 30px;
		color:#2D7EDF;
	}
	.header{
		font-size:15px;
		color:#2D7EDF;
		padding-bottom:10px;
		border-bottom:1px solid #eee;
	}
	.elfrom{
	 width:100%;
		background: #fff;
		padding:20px 15px;
 }
	/deep/.el-form{
		 margin-top:20px;
			margin-left:80px;
	}
	/deep/.el-input__inner{
		width:300px;
		height:35px;
		line-height: 35px;
	}
	/deep/.el-button{
		padding:10px 15px;
		// margin-left:80px;
	}
</style>
